
<div id="wrap">

	<%@ include file="../template/header.jsp"%>

	<!--center content-->
	<div class="center_content">

		<div class="left_content">

			<div class="title">
				<span class="title_icon"><img src="images/bullet1.gif"
					alt="" title="" /></span><%=rb.getString("menu.register")%>
			</div>

			<div class="feat_prod_box_details">

				<div class="contact_form">
					<div class="form_subtitle"><%=rb.getString("menu.register")%></div>
					<form name="register" action="<%=request.getContextPath()%>/register">
						<div class="form_row">
							<label class="contact"><strong><%=rb.getString("label.username")%>
									:</strong></label> <input type="text" class="contact_input" name="username"/>
									&nbsp;&nbsp;<span class="require">*</span>
						</div>

						<div class="form_row">
							<label class="contact"><strong><%=rb.getString("label.password")%>
									:</strong></label> <input type="password" class="contact_input" name="password"/>
									&nbsp;&nbsp;<span class="require">*</span>
						</div>
						
						<div class="form_row">
							<label class="contact"><strong><%=rb.getString("label.confirmpassword")%>
									:</strong></label> <input type="password" class="contact_input" name="confirmpassword"/>
									&nbsp;&nbsp;<span class="require">*</span>
						</div>

						<div class="form_row">
							<label class="contact"><strong><%=rb.getString("label.email")%>
									:</strong></label> <input type="text" class="contact_input" name="email"/>
									&nbsp;&nbsp;<span class="require">*</span>
						</div>

						<div class="form_row">
							<label class="contact"><strong><%=rb.getString("label.tel")%>
									:</strong></label> <input type="text" class="contact_input" name="tel"/>
									&nbsp;&nbsp;<span class="require">*</span>
						</div>

						<div class="form_row">
							<label class="contact"><strong><%=rb.getString("label.address")%>
									:</strong></label>
							<textarea class="contact_input" rows="4" cols="35" name="address" id="address"></textarea>
						</div>

						<div class="form_row">
							<div class="terms">
								<input type="checkbox" name="terms" onClick="chkCheck(this)"/><%=rb.getString("label.confirm")%>
								<a href="#">&#3648;&#3591;&#3639;&#3656;&#3629;&#3609;&#3652;&#3586;
									&#3649;&#3621;&#3632;
									&#3586;&#3657;&#3629;&#3605;&#3585;&#3621;&#3591;</a>
							</div>
						</div>

						<div class="form_row">
							<input type="button" id="btnSubmit" class="ui-button" style="float: right;"	
							onclick="validate();" disabled="disabled" value="<%=rb.getString("menu.register")%>" />
						</div>
					</form>
				</div>

			</div>

			<div class="clear"></div>
		</div>
		
		<!--end of left content-->
		<%@ include file="../template/right_content.jsp"%>
		<!--end of right content-->

		<div class="clear"></div>

	</div>

	<!--start of footer-->
	<%@ include file="../template/footer.jsp"%>

</div>

<script type="text/javascript">

	function chkCheck(box){
		
		if( box.checked == true)
		{
			document.getElementById("btnSubmit").disabled = false;
		}else{
			document.getElementById("btnSubmit").disabled = true;
		}
	}
	
	function validate(){
		
		var username = document.getElementsByName("username").item().value ;
		if(username.trim() == ""){
			alert("<%=msg.getString("message.require.username")%>");
		}else if(username.trim() != ""){
			isUsernameExist(username);
		}
	}
	

	function echeck(str) {

		var at="@";
		var dot=".";
		var lat=str.indexOf(at);
		var lstr=str.length;
		var ldot=str.indexOf(dot);
		if (str.indexOf(at)==-1){
		   alert("<%=msg.getString("message.wrong.email")%>");
		   return false;
		}

		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("<%=msg.getString("message.wrong.email")%>");
		   return false;
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("<%=msg.getString("message.wrong.email")%>");
		    return false;
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    alert("<%=msg.getString("message.wrong.email")%>");
		    return false;
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("<%=msg.getString("message.wrong.email")%>");
		    return false;
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    alert("<%=msg.getString("message.wrong.email")%>");
		    return false;
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("<%=msg.getString("message.wrong.email")%>");
		    return false;
		 }

		var tel = document.getElementsByName("tel").item().value ;
		var username = document.getElementsByName("username").item().value ;
		
		$.ajax({
			url : "<%=request.getContextPath()%>/register",
			data : { 
				"check" : "Y",
				"email" : str
			},
			success : function(result) {
				if(Number(result) == 0){
					if(tel.trim() == ""){
						alert("<%=msg.getString("message.require.tel")%>");
	 				}else if(tel.trim() != ""){
	 					isNumber(tel.trim());
	 				}
					
				}else{
					alert("<%=msg.getString("message.exist.email")%>");
				}
			}
	 	});
		
	}
	
	function isNumber(value) {
		
		if (isNaN(value)){
			alert("<%=msg.getString("message.wrong.tel")%>");
		}else if((value.length < 9) || (value.length > 10)){
			alert("<%=msg.getString("message.wrong.tel")%>");
		}else{
			
			var username = document.getElementsByName("username").item().value ;
			var password = document.getElementsByName("password").item().value ;
			var email = document.getElementsByName("email").item().value ;
			var tel = document.getElementsByName("tel").item().value ;
			var address = document.getElementsByName("address").item().value ;
			
			// ##### SUBMIT VALUE #####
			$.ajax({
				url : "<%=request.getContextPath()%>/register",
				data : { 
					"check" : "N",
					"username" : username,
					"password" : password, 
					"email" : email, 
					"tel" : tel ,
					"address" : address 
				},
				success : function() {
					
					alert("<%=msg.getString("message.register.complete")%>");
					document.location.replace("LoginServlet");
				}
		 	});
			
		}
	}
	
	function isUsernameExist(value) {
		
	 	$.ajax({
			url : "<%=request.getContextPath()%>/register",
			data : { 
				"check" : "Y",
				"username" : value 
			},
			success : function(result) {
				
				var password = document.getElementsByName("password").item().value ;
				var confirmpassword = document.getElementsByName("confirmpassword").item().value ;
				var email = document.getElementsByName("email").item().value ;

				if(Number(result) == 0){
					if(password.trim() == ""){
						alert("<%=msg.getString("message.require.password")%>");
		 			}else if(confirmpassword.trim() == ""){
						alert("<%=msg.getString("message.require.confirmpassword")%>");
		 			}else if(password != confirmpassword){
						alert("<%=msg.getString("message.wrong.confirm.password")%>");
		 			}else if(email.trim() == ""){
						alert("<%=msg.getString("message.require.email")%>");
		 			}else if(email.trim() != ""){
		 				echeck(email);
		 			}
				}else{
					alert("<%=msg.getString("message.exist.username")%>");
				}
						
			}
		});
	 	
	}
	
	
	
	
</script>
